import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/music/music_logic.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

class MusicPage extends StatelessWidget {

  final logic = Get.put(MusicLogic());
  final state = Get.find<MusicLogic>().state;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.music_control.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
        // leading: IconButton(
        //   padding: EdgeInsets.only(left: 15,),
        //   icon: Image.asset("assets/images/space/icon_appbar_arrow_back.png"),
        //   onPressed: () { Get.back(); },
        //   // child: Image.asset("images/icon_appbar_arrow_back.png"),
        // ),
        // leadingWidth: 25,
      ),
      body: Column(
        children: [
          Container(
            width: 1.sw,
            margin: EdgeInsets.only(left: 42.w, top: 100.h),
            child: GetBuilder<MusicLogic>(
                builder: (_) {
                  return Text(LocaleKeys.music_default.ts+logic.defaultMusic(), style: TextStyle(color: ColorConst.btnFontColor, fontSize: 42.sp),);
                }),
          ),
          _buildListItem(LocaleKeys.music_netease.ts, "music_netease", onTap: (){logic.switchMusic(0);}),
          _buildListItem(LocaleKeys.music_kugou.ts, "music_kugou", onTap: (){logic.switchMusic(1);}),
          _buildListItem(LocaleKeys.music_qq.ts, "music_qq", onTap: (){logic.switchMusic(2);}),
        ],
      ),
    );
  }

  Widget _buildListItem(String title, String id, {onTap}) {
    return GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: onTap,
        child: Container(
          height: 175.h,
          padding: EdgeInsets.fromLTRB(59.w, 30.h, 59.w, 30.h),
          margin: EdgeInsets.fromLTRB(42.w, 17.h, 42.w, 23.h),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.white
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(title, style: TextStyle(fontSize: 42.sp),),
              GetBuilder<MusicLogic>(
                  builder: (_) {
                    return Container(
                      decoration: const BoxDecoration(
                          shape: BoxShape.circle, color: Colors.transparent),
                      child: Padding(
                        padding: const EdgeInsets.all(10),
                        child: logic.switchLogic(id)
                            ? Image(
                          image: const AssetImage(
                              'assets/images/device/icon_music_checked.png'),
                          width: 60.w,
                          height: 60.w,
                        )
                            : Image(
                          image: const AssetImage(
                              'assets/images/device/icon_music_unchecked.png'),
                          width: 60.w,
                          height: 60.w,
                        ),
                      ),
                    );
                  }),
            ],
          ),
        )
    );
  }

}